<template >
  <div class="title-wrapper">
    <div class="commentImg">
      <img :src="leaver.headImg" alt="" />
    </div>
    <div class="commentBy">
      {{ leaver.username }}
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
export default {
  props: ["leaver"],
  setup(props) {
    const state = reactive({
      leaver: {},
    });
    onMounted(() => {
      state.leaver = props.leaver;
    });
    return { ...toRefs(state) };
  },
};
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  .commentImg {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50px;
    }
  }
  .commentBy {
    margin: 0 10px;
    font-size: 14px;
    font-weight: 600;
  }
}
</style>
